<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>领养中心</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8" />
    <meta name="keywords" content=""
    />
    <script>
        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <!--// Meta tag Keywords -->
    <!-- css files -->
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css" type="text/css" media="all">
    <!-- Owl-Carousel-CSS -->
    <link rel="stylesheet" href="/static/css/style.css" type="text/css" media="all" />

</head>
<style>
    .btn-lg{
        background: #4aaaeb;
    }
</style>
<body>
<!--导航栏-->
<!-- sticky navigation -->
<div class="nav-links">
    <nav class='navbar navbar-default'>
        <div class='container'>
            <div class='collapse navbar-collapse'>
                <ul style="position: relative">
                    <li>
                        <!--						<a href="/user/index">主页</a>-->
                        <a th:href="@{/user/index}">主页</a>
                    </li>
                    <li>
                        <!--						<a href="/user/about">流浪猫狗知识</a>-->
                        <a th:href="@{/user/about}">流浪猫狗知识</a>
                    </li>
                    <li>
                        <a th:href="@{'/user/toPersonal?id='+${session.user.id}}">个人中心</a>
                        <!--						<a href="/user/personal">个人中心</a>-->

                    </li>
                    <li>
                        <a th:href="@{/goodsy/getAGoodsyAll}">救助商品</a>
                    </li>
                    <li>
                        <a th:href="@{/adopt/login}">领养中心</a>
                    </li>
                    <li th:unless="${session.user.userName eq null}">
                        <a th:href="@{/user/blog}">博客</a>
                    </li>
                    <li th:if="${session.user.userName eq null}">
                        <button class="btn-primary btn-lg loging" data-toggle="modal" data-target="#login">注册/登录</button>
                    </li>
                    <li th:unless="${session.user.userName eq null}" >
                        <button class="btn-primary btn-lg" data-toggle="modal" data-target="#editUsers">修改</button>
                    </li>
                    <li>
                        <span th:text="当前用户+'：'+${session.user.userName}"></span>
                    </li>
                    <button th:unless="${session.user.userName eq null}"style="position: absolute;right: -70px;top: 5px" class="btn-primary btn-lg exit">退出</button>
                </ul>
            </div>
        </div>
    </nav>
</div>
<div class="modal fade" id="editUsers" tabindex="-1" role="dialog" aria-labelledby="myModalLabe">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabe">修改用户信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="edit_admin_form" action="/user/updatePersonInfo">
                    <input type="hidden" id="edit_id" name="id">
                    <div class="form-group">
                        <label for="edit_userName" class="col-sm-2 control-label">
                            用户名称
                        </label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="edit_userName" placeholder="用户名称" name="userName" disabled>
                        </div>
                        <label for="edit_password" class="col-sm-2 control-label">
                            用户密码
                        </label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="edit_password" placeholder="用户密码" name="password" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="edit_sex" class="col-sm-2 control-label">
                            性别
                        </label>
                        <div class="col-sm-4">
                            <select class="form-control" id="edit_sex" name="sex">
                                <option value="1">男</option>
                                <option value="0">女</option>
                            </select>
                        </div>
                        <label for="edit_telephone" class="col-sm-2 control-label">
                            电话号码
                        </label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="edit_telephone" placeholder="电话" name="phone">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="edit_Email" class="col-sm-2 control-label">
                            Email
                        </label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="edit_Email" placeholder="Email"  name="email">
                        </div>
                        <label for="edit_address" class="col-sm-2 control-label">
                            地址
                        </label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="edit_address" placeholder="地址" name="address">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class=" btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class=" btn-primary" >保存修改</button>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>
<!-- //sticky navigation -->

<!-- services -->
<div class="services" id="services">
    <div class="container">
        <h3 class="agile-title">Services Overview</h3>
        <div class="w3_agile_services_grids">
            <div class="col-md-4 col-sm-4 col-xs-4 w3_agile_services_grid " data-aos="zoom-in">
                <div class="ih-item circle effect1 agile_services_grid">
                    <div class="spinner"></div>
                    <div class="img">
					   <a th:href="@{'/adopt/getAdopAllByPetId?petId='+${listdop.get(0).id}}">
                        <img th:src="${listdop.get(0).pic}" alt="" class="img-responsive" />
                       </a>
                    </div>
                </div>
                <fieldset>
                    <legend>Service 1</legend>
                    consectetur adipiscing elit, sed do eiusmod tempor et dolore magna aliqua.
                </fieldset>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-4 w3_agile_services_grid" data-aos="zoom-in">
                <div class="ih-item circle effect1 agile_services_grid">
                    <div class="spinner"></div>
                    <div class="img">
<!--                        <a href="/static/html/show.html">-->
                        <a th:href="@{'/adopt/getAdopAllByPetId?petId='+${listdop.get(1).id}}">
                        <img th:src="${listdop.get(1).pic}" alt=" " class="img-responsive" />
                        </a>
                    </div>
                </div>
                <fieldset>
                    <legend>Service 2</legend>
                    consectetur adipiscing elit, sed do eiusmod tempor et dolore magna aliqua.
                </fieldset>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-4 w3_agile_services_grid" data-aos="zoom-in">
                <div class="ih-item circle effect1 agile_services_grid">
                    <div class="spinner"></div>
                    <div class="img">
<!--					   <a href="/static/html/show.html">-->
                        <a th:href="@{'/adopt/getAdopAllByPetId?petId='+${listdop.get(2).id}}">
                        <img th:src="${listdop.get(2).pic}" alt=" " class="img-responsive" />
                       </a>
                    </div>
                </div>
                <fieldset>
                    <legend>Service 3</legend>
                    consectetur adipiscing elit, sed do eiusmod tempor et dolore magna aliqua.
                </fieldset>
            </div>

        </div>

    </div>
    
</div>
<!-- //services -->
<!-- js -->
<script src="/static/JQuery/jquery-3.4.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.js"></script>
<!-- Necessary-JavaScript-File-For-Bootstrap -->
<!-- //js -->

<!-- start-smooth-scrolling 上去-->
<script src="/static/js/move-top.js"></script>
<script src="/static/js/easing.js"></script>
<script>
    jQuery(document).ready(function ($) {
        $(".scroll").click(function (event) {
            event.preventDefault();

            $('html,body').animate({
                scrollTop: $(this.hash).offset().top
            }, 1000);
        });
    });
</script>
<!-- //end-smooth-scrolling -->

<!-- smooth-scrolling-of-move-up 这是service.html页面反到底层上去的功能 -->
<script>
    $(document).ready(function () {
        $().UItoTop({
            easingType: 'easeOutQuart'
        });
        $(".exit").on('click',function(){
            location.href = 'http://localhost:8081/';
        })

    });
</script>
<!-- //smooth-scrolling-of-move-up -->


</body>

</html>